<!--
  * 商品明细
  *
-->
<template>
  <a-table :dataSource="props.goodsData" :columns="columns" expandRowByClick :showExpandColumn="false" :pagination="false" :scroll="{ x: 'max-content' }" rowKey="goods_id" size="small" bordered>
    <template #bodyCell="{ text, record, index, column }">
      <template v-if="column.dataIndex === 'index'">
        {{ index + 1 }}
      </template>
      <template v-if="column.dataIndex === 'goods_name'">
        <CopyText :text="text" />
      </template>
    </template>
    <template #expandedRowRender="{ record }">
      <a-row v-for="item in record.detail">
        <a-col :span="4" :offset="4"> 门店名称：{{ item.store }} </a-col>
        <a-col :span="4" :offset="6">应拣数量：{{ item.num }}</a-col>
        <a-col :span="6">备注：{{ item?.remark ?? '' }}</a-col>
      </a-row>
    </template>
    <template #summary>
      <a-table-summary fixed>
        <a-table-summary-row>
          <a-table-summary-cell>总计</a-table-summary-cell>
          <a-table-summary-cell>{{ props.goodsData.length }}个商品</a-table-summary-cell>
          <a-table-summary-cell />
          <a-table-summary-cell />
          <a-table-summary-cell>{{ props.detailData.total_num }}</a-table-summary-cell>
          <a-table-summary-cell />
          <a-table-summary-cell />
          <a-table-summary-cell />
        </a-table-summary-row>
      </a-table-summary>
    </template>
  </a-table>
</template>
<script setup lang="ts">
import _ from 'lodash'

const props = defineProps({
  detailData: {
    type: Object,
    default: () => ({})
  },
  goodsData: {
    type: Array,
    default: () => []
  }
})

const columns = reactive([
  {
    title: '序号',
    dataIndex: 'index',
    width: 20
  },
  {
    title: '商品名称',
    dataIndex: 'goods_name',
    width: 100
  },
  {
    title: '经销商',
    dataIndex: 'dealer_name'
  },
  {
    title: '开单仓库',
    dataIndex: 'warehouse_name'
  },
  {
    title: '货位编码',
    dataIndex: 'recommend_location'
  },
  {
    title: '应拣数量(小单位)',
    dataIndex: 'min_qty'
  },
  {
    title: '应拣数量(混合)',
    dataIndex: 'num'
  },
  {
    title: '推荐批次日期',
    dataIndex: 'batch_date'
  },
  {
    title: '商品备注',
    dataIndex: 'remark'
  }
])

// const total_price = computed(() => {
//   return _(props.goodsData)
//     .map(({ total_price }) => Number(total_price))
//     .sum()
//     .toFixed(2)
// })
</script>
